<template>
  <div class="min-h-screen bg-gray-50 ">
    <div class="max-w-6xl mx-auto px-4 py-6">
      <!-- Header -->
      <div class="mb-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900  mb-1">Agent Center</h1>
            <p class="text-sm text-gray-600 ">
              Manage your AI agents and track their performance
            </p>
          </div>
          <router-link 
            to="/create-agent"
            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 font-medium text-sm"
          >
            Create Agent
          </router-link>
        </div>
      </div>

      <!-- Stats Overview -->
      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Total Agents</p>
              <p class="text-xl font-bold text-gray-900 ">{{ userAgents.length }}</p>
            </div>
            <div class="w-8 h-8 bg-blue-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-blue-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Total Revenue</p>
              <p class="text-xl font-bold text-gray-900 ">${{ (totalEarnings || 0).toFixed(0) }}</p>
            </div>
            <div class="w-8 h-8 bg-green-100  rounded-lg flex items-center justify-center">
              <svg class="w-6 h-6 text-green-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">Total Users</p>
              <p class="text-xl font-bold text-gray-900 ">{{ totalUsers.toLocaleString() }}</p>
            </div>
            <div class="w-8 h-8 bg-purple-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-purple-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
              </svg>
            </div>
          </div>
        </div>

        <div class="bg-white  rounded-lg border border-gray-200  p-4">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-xs font-medium text-gray-500  uppercase tracking-wide">This Month</p>
              <p class="text-xl font-bold text-gray-900 ">${{ (monthlyEarnings || 0).toFixed(0) }}</p>
            </div>
            <div class="w-8 h-8 bg-orange-100  rounded-lg flex items-center justify-center">
              <svg class="w-4 h-4 text-orange-600 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- Agents Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        <div 
          v-for="agent in userAgents" 
          :key="agent.id"
          class="bg-white  rounded-lg border border-gray-200  hover:shadow-lg transition-all duration-200"
        >
          <!-- Agent Header -->
          <div class="p-4 border-b border-gray-200 ">
            <div class="flex items-center space-x-3 mb-3">
              <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white text-lg font-bold">
                {{ agent.metadata.logo }}
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center space-x-2 mb-1">
                  <h3 class="font-semibold text-gray-900  text-sm truncate">{{ agent.name }}</h3>
                  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800  ">
                    {{ agent.status }}
                  </span>
                </div>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800  ">
                  {{ formatCategory(agent.category) }}
                </span>
              </div>
            </div>
            <p class="text-xs text-gray-600  line-clamp-2">{{ agent.description }}</p>
          </div>

          <!-- Agent Stats -->
          <div class="p-4">
            <div class="grid grid-cols-2 gap-4 mb-4">
              <div class="text-center">
                <p class="text-lg font-bold text-gray-900 ">${{ (agent.earnings?.total || 0).toFixed(0) }}</p>
                <p class="text-xs text-gray-600 ">Total Revenue</p>
              </div>
              <div class="text-center">
                <p class="text-lg font-bold text-gray-900 ">${{ (agent.earnings?.thisMonth || 0).toFixed(0) }}</p>
                <p class="text-xs text-gray-600 ">This Month</p>
              </div>
              <div class="text-center">
                <p class="text-lg font-bold text-gray-900 ">{{ agent.usage.totalUsers }}</p>
                <p class="text-xs text-gray-600 ">Total Users</p>
              </div>
              <div class="text-center">
                <p class="text-lg font-bold text-gray-900 ">{{ agent.usage.activeUsers }}</p>
                <p class="text-xs text-gray-600 ">Active Users</p>
              </div>
            </div>

            <!-- Usage Progress -->
            <div class="mb-4">
              <div class="flex items-center justify-between mb-1">
                <span class="text-xs font-medium text-gray-900 ">Usage This Month</span>
                <span class="text-xs text-gray-600 ">{{ agent.usage.thisMonthCalls.toLocaleString() }} calls</span>
              </div>
              <div class="w-full bg-gray-200  rounded-full h-2">
                <div 
                  class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full"
                  :style="{ width: `${Math.min((agent.usage.thisMonthCalls / 10000) * 100, 100)}%` }"
                ></div>
              </div>
            </div>

            <!-- Projects -->
            <div v-if="agent.projects.length > 0" class="mb-4">
              <p class="text-xs font-medium text-gray-900  mb-2">Active Projects</p>
              <div class="flex flex-wrap gap-1">
                <span 
                  v-for="project in agent.projects.slice(0, 2)" 
                  :key="project.id"
                  class="inline-flex items-center px-2 py-1 rounded text-xs font-medium"
                  :class="{
                    'bg-green-100 text-green-800  ': project.status === 'active',
                    'bg-gray-100 text-gray-800  ': project.status === 'completed',
                    'bg-yellow-100 text-yellow-800  ': project.status === 'paused'
                  }"
                >
                  {{ project.name }}
                </span>
                <span v-if="agent.projects.length > 2" class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800  ">
                  +{{ agent.projects.length - 2 }}
                </span>
              </div>
            </div>

            <!-- Rating -->
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center space-x-1">
                <svg v-for="i in 5" :key="i" class="w-3 h-3" :class="i <= Math.floor(agent.metadata.rating) ? 'text-yellow-400' : 'text-gray-300 '" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                <span class="text-xs text-gray-600  ml-1">{{ agent.metadata.rating }}</span>
              </div>
              <span class="text-xs text-gray-600 ">{{ agent.metadata.usageCount.toLocaleString() }} uses</span>
            </div>

            <!-- Actions -->
            <div class="flex items-center space-x-2">
              <router-link 
                :to="`/agent/${agent.id}`"
                class="flex-1 px-3 py-2 text-xs font-medium text-blue-600  hover:text-blue-700  border border-blue-200  rounded hover:bg-blue-50  transition-all duration-200 text-center"
              >
                View Details
              </router-link>
              <button 
                class="flex-1 px-3 py-2 text-xs font-medium text-gray-600  hover:text-gray-700  border border-gray-200  rounded hover:bg-gray-50  transition-all duration-200"
              >
                Edit
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Empty State -->
      <div v-if="userAgents.length === 0" class="text-center py-12">
        <div class="w-16 h-16 bg-gray-100  rounded-full flex items-center justify-center mx-auto mb-4">
          <svg class="w-8 h-8 text-gray-400 " fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </div>
        <h3 class="text-lg font-medium text-gray-900  mb-2">No agents created yet</h3>
        <p class="text-sm text-gray-600  mb-6">Start creating your first AI agent to begin earning</p>
        <router-link 
          to="/create-agent"
          class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 font-medium"
        >
          Create First Agent
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted } from 'vue'
  import { useUserStore } from '../stores/user'

  const userStore = useUserStore()

  // Computed
  const userAgents = computed(() => userStore.userAgents)
  const totalEarnings = computed(() => userStore.totalEarnings)
  const monthlyEarnings = computed(() => userStore.monthlyEarnings)
  const totalUsers = computed(() => userStore.totalUsers)

  // Methods
  const formatCategory = (category: string) => {
    return category.split('-').map(word =>
      word.charAt(0).toUpperCase() + word.slice(1)
    ).join(' ')
  }

  // Lifecycle
  onMounted(async () => {
    await userStore.fetchUserAgents()
  })
</script>

<style scoped>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>